<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <!-- JS文件 -->
    <script src="/static/js/echarts.min.js"></script>

    <title>热门电影</title>

    <!-- CSS文件 -->
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>

<body>

<!--头部-->
<div class="header">
    <div class="navbar">
        <div class="nav-item "><a href="/index">首页</a></div>
        <div class="nav-item"><a href="/movie">热门电影</a></div>
        <div class="nav-item"><a href="/score">评分</a></div>
        <div class="nav-item"><a href="/word">词云</a></div>
    </div>
</div>

<!-- 提示信息 -->
<main id="main">
    <section id="about" class="about">
        <div class="section-title">
            <h2>热门电影票房漏斗图(单位：万美元)</h2>
        </div>
    </section>
    <div id="8d5a36e25277468f933db39892f0fa6a" class="chart-container" style="width:900px; height:500px; "></div>
</main>

<div class="footer">
    <p2>&#xa9; 2025翟荟茹python期末作业</p2>
</div>

<script type="text/javascript">

    var chart_8d5a36e25277468f933db39892f0fa6a = echarts.init(
        document.getElementById('8d5a36e25277468f933db39892f0fa6a'), 'white', {renderer: 'canvas'});
    var option_8d5a36e25277468f933db39892f0fa6a = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "aria": {
            "enabled": false
        },
        "color": [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc"
        ],
        "series": [
            {
                "type": "funnel",
                "name": "",
                "data": {{ series_data|tojson }},
                {#"min": 0,#}
                {#"max": 100,#}
                "minSize": "60%",
                "maxSize": "100%",
                "orient": "vertical",
                "sort": "ascending",
                "gap": 0,
                "legendHoverLink": true,
                "funnelAlign": "center",
                "label": {
                    "show": true,
                    "position": "inside",
                    "margin": 8,
                    "valueAnimation": false
                },
                "selectedMode": false,
                "zlevel": 0,
                "z": 2
            }
        ],
        "legend": [
            {
                "data": {{ movie_name|tojson }},
                "selected": {},
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14,
                "backgroundColor": "transparent",
                "borderColor": "#ccc",
                "borderRadius": 0,
                "pageButtonItemGap": 5,
                "pageButtonPosition": "end",
                "pageFormatter": "{current}/{total}",
                "pageIconColor": "#2f4554",
                "pageIconInactiveColor": "#aaa",
                "pageIconSize": 15,
                "animationDurationUpdate": 800,
                "selector": false,
                "selectorPosition": "auto",
                "selectorItemGap": 7,
                "selectorButtonGap": 10
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "showContent": true,
            "alwaysShowContent": false,
            "showDelay": 0,
            "hideDelay": 100,
            "enterable": false,
            "confine": false,
            "appendToBody": false,
            "transitionDuration": 0.4,
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0,
            "padding": 5,
            "order": "seriesAsc"
        },
        "title": [
            {
                "show": true,

                "target": "blank",
                "subtarget": "blank",
                "padding": 5,
                "itemGap": 10,
                "textAlign": "auto",
                "textVerticalAlign": "auto",
                "triggerEvent": false
            }
        ]
    };
    chart_8d5a36e25277468f933db39892f0fa6a.setOption(option_8d5a36e25277468f933db39892f0fa6a);
</script>
</body>

</html>